<template>
  <nav class="navbar-container">
    <div :class="['nav-main', type+'-layout']">
      <div style="display:flex;flex-direction: row">
        <div class="logo" @click="gotoHome">
          <!--          <img style="width: 45px;height: 45px;border-radius: 5px" src="../assets/logo.png">-->
          <div style="font-size: 20px;font-weight: bold">
            候浪-后台管理
          </div>
        </div>
        <div class="menu"  v-if="isLogin">
          <!--          <template v-if="type === 'main'">-->
          <!--            <div class="menu-item" v-for="item in menu" :key="item.title"-->
          <!--                 @click="$router.push(item.to)" :class="{'chosen-menu-item': item.page.includes($route.name)}">-->
          <!--              <span>{{item.title}}</span>-->
          <!--            </div>-->
          <!--          </template>-->
        </div>
      </div>
      <div class="user">
        <div v-if="isLogin" @click="logout">
          <span>登出</span>
        </div>

        <!--        <el-dropdown class="avatar-container" trigger="click" v-if="isLogin">-->
        <!--          <div style="display: flex;flex-direction: column;align-items: center;justify-content: center" @click="showTab = !showTab">-->
        <!--            <img style="width: 40px;height: 40px;margin-right: 15px;border-radius: 25px" :src="avatar">-->
        <!--          </div>-->
        <!--          <el-dropdown-menu slot="dropdown" class="user-dropdown">-->
        <!--            <el-dropdown-item>-->
        <!--              <span>你好，{{nickname}}</span>-->
        <!--            </el-dropdown-item>-->
        <!--            <el-dropdown-item icon="el-icon-user-solid" divided >-->
        <!--              <span @click="gotoSelf">个人中心</span>-->
        <!--            </el-dropdown-item>-->
        <!--            <el-dropdown-item icon="el-icon-switch-button" divided>-->
        <!--              <span @click="logout">登出</span>-->
        <!--            </el-dropdown-item>-->
        <!--          </el-dropdown-menu>-->
        <!--        </el-dropdown>-->
        <div @click="gotoLogin" v-else>
          <span>登录 | 注册</span>
        </div>
      </div>
    </div>
  </nav>
</template>

<script>
import constants from "@/utils/constants";

export default {
  name: "NavBar",
  props: ['type'],
  data() {
    return {
      showTab:false,
      isLogin:false,
      menu: [
        {
          title: '历史',
          to: {
            name: 'history'
          },
          page: ['history']
        },
        {
          title: '关注',
          to: {
            name: 'follow'
          },
          page: ['follow']
        },
        {
          title: '扩展',
          to: {
            name: 'develop'
          },
          page: ['develop','book-read','book-list']
        },
        {
          title: '造物者说',
          to: {
            name: 'create'
          },
          page: ['create-dashboard',
            "audit-manage",
            "course-manage",
            "course-info-edit",
            "course-structure-edit",
            "course-user-page",
            "course-comment-page",
            "course-talk-page",
            "course-message-page",
            "course-report-page",
            "island-manage",
            "island-info-edit",
            "island-user-page",
            "island-post-page",
            "island-comment-page",
            "island-message-page",
            "island-report-page",
            "question-manage",
            "question-info-edit",
            "question-point-page",
            "question-answer-page",
            "question-comment-page",
            "question-report-page",
            "user-page",
            "course-page",
            "course-problem-page",
            "course-exam-page",
            "island-page",
            "question-page",
            "config",
            "bonfire-page",
            "appearance-config",
            "course-problem-page",
            "course-exam-page",]
        }
      ],
      userInfo: {},

      nickname:"",
      avatar:"https://img.zcool.cn/community/016eee56137ddd6ac7251df888c254.png@1280w_1l_2o_100sh.png",
      inputCourseName:""
    }
  },

  mounted() {
    if(window.localStorage.getItem(constants.ACCESS_TOKEN)){
      this.isLogin = true
      // this.getProfile()
    }else{
      if(this.$route.name !== 'register' && this.$route.name !== 'login')
        this.$router.push({
          name:"login"
        })
    }
  },
  methods: {
    gotoHome() {
      this.$router.push({
        name: 'home'
      })
    },
    gotoLogin() {
      this.$router.push({
        name: 'login'
      })
    },
    gotoSelf() {
      this.$router.push({
        name: 'self-center'
      })
    },
    logout(){
      window.localStorage.setItem(constants.ACCESS_TOKEN, JSON.stringify(null))
      this.$router.push({
        name: 'login'
      })
    },
    getProfile(){
      this.$api.getProfile().then((res)=>{
        console.log("结果",res)
        this.avatar = res.data.data.avatar
        this.nickname = res.data.data.nickname
      })
    },
  }
}
</script>

<style scoped lang="scss">
@import "../styles/mixins/index";

@mixin chosen() {
  font-weight: bolder;
  border-bottom: 5px solid #FFFFFF;
  background-image: linear-gradient(to top, #e1e1e1, #646464, #2c2c2c);
}
@mixin bg() {
  background: $l11-color;
}



.navbar-container {
  color: white;
  background-color: #2c2c2c;

  width: 100%;
  height: 70px;
  position: fixed;
  z-index: 100;

  display: flex;
  flex-direction: row;
  justify-content: center;
}
.nav-main {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 90%;
}
.logo {
  width: 250px;
  display: flex;
  flex-direction: row;
  align-items: center;
  cursor: pointer;
}
.menu {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 800px;
  margin-left: 30px;

  font-size: 18px;

  .menu-item {
    height: 70px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 10px;
    margin-right: 30px;
    cursor: pointer;
    &.chosen-menu-item {
      @include chosen;
    }
    &:hover {

    }
  }
}

.search{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  input:focus{outline: none;}
}

.user {
  width: 120px;
  font-size: 18px;
  > div {
    cursor: pointer;
  }
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}
</style>
